package com.huluobo.a2301mdmdemo.demo

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Warning
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage

/**
 *  Created by LC on 2025/6/20.
 */

@Composable
fun MyBox() {
    Box(modifier = Modifier.padding(10.dp), contentAlignment = Alignment.TopStart) {
        Text(
            text = "hello", modifier = Modifier
                .background(Color.Yellow, RoundedCornerShape(10.dp))
                .border(
                    1.dp, Color.Blue,
                    RoundedCornerShape(10.dp)
                )
                .padding(10.dp, 5.dp)
        )
        Text(
            text = "2",
            color = Color.White,
            textAlign = TextAlign.Center,
            fontSize = 9.sp,
            modifier = Modifier
                .size(16.dp)
                .offset((-3).dp, (-3).dp)
                .background(Color.Red, CircleShape)
                .padding(3.dp)

        )
    }
}

data class Student(val name: String, val desc: String, val img: String)

@Composable
fun MyList() {
    val list = mutableListOf<Student>()

    for (i in 1..20) {
        list.add(
            Student(
                "张三$i",
                "这是我的个人简介:$i",
                "https://img1.baidu.com/it/u=4214113141,2036563917&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729098000&t=0662d2b383091882ccdd43ad060de2a7"
            )
        )
    }

    //纵向列表 横向列表 只有verticalArrangement的区别,需要改为横向的间隔
//    LazyColumn(content = {
//        items(list) {
//            StudentItem(student = it)
//        }
//    }, verticalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.fillMaxWidth())
//    LazyVerticalGrid(columns = GridCells.Fixed(3), content = {
//        items(list) {
//            StudentItem(student = it)
//        }
//    })

    LazyVerticalStaggeredGrid(columns = StaggeredGridCells.Fixed(3), content = {
        items(list) {
            StudentItem(student = it)
        }
    })
}

//相当于RecyclerView的item
@Composable
fun StudentItem(student: Student) {
    Column(Modifier.padding(10.dp), verticalArrangement = Arrangement.spacedBy(10.dp)) {
        Row {
            AsyncImage(
                model = student.img,
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(80.dp)
                    .clip(CircleShape)
            )
            Spacer(modifier = Modifier.width(10.dp))
            Column(Modifier.height(80.dp), verticalArrangement = Arrangement.SpaceAround) {
                Text(text = student.name)
                Text(text = student.desc)
            }
        }
        Spacer(modifier = Modifier.height(10.dp))
        Divider(thickness = 0.5.dp)
    }
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun MyFlowRow() {
    val list = remember {
        //快照
        SnapshotStateList<String>()
    }

    var key by remember {
        mutableStateOf("")
    }

    Column {
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = key,
            onValueChange = { key = it },
            trailingIcon = {
                Icon(imageVector = Icons.Default.Search, contentDescription = "", modifier = Modifier.clickable {
                    if (key.isNotEmpty()) {
                        list.add(key)
                        key = ""
                    }
                })
            })

        FlowRow(
            modifier = Modifier.padding(10.dp),
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            list.forEach {
                FlowItem(text = it)
            }
        }
    }
}

@Composable
fun FlowItem(text: String) {
    Text(
        text = text, modifier = Modifier
            .background(Color.Yellow, RoundedCornerShape(20.dp))
            .border(
                1.dp, Color.Gray,
                RoundedCornerShape(
                    20.dp
                )
            )
            .padding(10.dp, 5.dp),
        maxLines = 1, overflow = TextOverflow.Ellipsis
    )
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyBanner() {
    val list = listOf(
        "https://img2.baidu.com/it/u=1134184213,2435039814&fm=253&fmt=auto?w=1062&h=800",
        "https://img1.baidu.com/it/u=2693733305,4035903587&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1729184400&t=92694ac7a4bb0b4a405af0e28c18cd82",
        "https://img0.baidu.com/it/u=540669065,2162680038&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729184400&t=3adc1ec41d0f0d8ac469eb88eb19c531",
        "https://img2.baidu.com/it/u=553712968,3437602612&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729184400&t=280fc51f8b1c0619aedbe9c1d5ce9895",
        "https://img0.baidu.com/it/u=1677400077,1401427640&fm=253&fmt=auto?w=679&h=1216"
    )

    //保存轮播图页面的下标
    val pageState = rememberPagerState {
        5
    }

    Column(modifier = Modifier.height(300.dp)) {
        HorizontalPager(state = pageState, modifier = Modifier.height(250.dp)) { index ->
            AsyncImage(
                model = list[index],
                contentDescription = "",
                modifier = Modifier.height(250.dp),
                contentScale = ContentScale.Crop
            )
        }

        Row(
            horizontalArrangement = Arrangement.Center, modifier = Modifier
                .fillMaxWidth()
                .offset(y = (-20).dp)
        ) {
            repeat(pageState.pageCount) { index ->
                val color = if (pageState.currentPage == index) Color.DarkGray else Color.LightGray
                Box(
                    modifier = Modifier
                        .size(16.dp)
                        .padding(3.dp)
                        .clip(CircleShape)
                        .background(color = color)
                )
            }
        }
    }
}

@Composable
fun MyDialog() {

    var isShow by remember {
        mutableStateOf(false)
    }

    Column {
        Button(onClick = {
            isShow = true
        }) {
            Text(text = "弹窗")
        }
    }

    if (isShow) {
        AlertDialog(
            //当点击弹窗外部时
            onDismissRequest = {
                isShow = false
            },
            //确认按钮
            confirmButton = {
                OutlinedButton(onClick = {
                    isShow = false
                }) {
                    Column {
                        Text(text = "确认")
                        Text(text = "确认")
                    }
                }
            }, dismissButton = {
                OutlinedButton(onClick = {
                    isShow = false
                }) {
                    Text(text = "取消")
                }
            }, title = {
                Row(
                    modifier = Modifier.padding(10.dp),
                    horizontalArrangement = Arrangement.spacedBy(10.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(imageVector = Icons.Default.Warning, contentDescription = "")
                    Text(text = "弹窗提醒")
                }
            }, text = {
                Text(text = "弹窗内容")
            })
    }
}
